<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="Robots" content="noindex, nofollow">
<title>Floatbox v4.26 Instructions</title>
<style type="text/css">
body { font-family:Verdana, Arial, Helvetica, sans-serif; line-height: 17px; font-size:13px; background-color:#fafafa; }
#content { margin:1em 25px; }
h2 { font-size:1.3em; margin:.7em 0 .2em 0; color:#046; }
h3 { font-size: 1.15em; margin:-.3em 0 .8em 0; color: #046; }
h4 { font-size:1em; margin:.7em 0 0 0; color:#046; }
h5 { font-size:.9em; margin:1.2em 0 0 0; }
p { margin:.6em 0 0 1.5em; }
.code, .blockcode { font-family:"Courier New", Courier, monospace; font-size:0.85em; color:#603; background-color:#eaeaea; }
.blockcode { display:block; margin-top:0.5em; }
ul, ol { margin-top:.4em; }
li { margin-top:.3em; }
ul.index ul { list-style-type:none; margin:0 0 7px 15px; padding:0; }
.index li { margin-top:.2em; }
div.separator { height:1px; width:80%; font-size:1px; margin:24px 0; border-color:#000; border-style:solid; border-width:1px 0; }
</style>
</head>
<body>
<div id="content">
<h2>Floatbox v4.26 - Instructions</h2>
<a href="http://randomous.com/floatbox/home">randomous.com</a>
<div id="index" class="separator"></div>

<h4>Index</h4>
<ul>
<li><a href="#quickstart">Quick-start</a></li>
<li><a href="#activation">Activating elements</a></li>
<li><a href="#options">Configuring options</a></li>
<li><a href="#anchoroptions">Setting options directly on anchors</a></li>
<li><a href="#pageoptions">Setting page-specific options</a></li>
<li><a href="#globaloptions">Setting site-wide options</a></li>
<li><a href="#configurator">Using the Configurator to setup global and page-specific options</a></li>
<li><a href="#licensekey">License key</a></li>
<li><a href="#installation">Installation alternatives</a></li>
<li><a href="#upgrade">Upgrading</a></li>
<li><a href="#doctype">Doc Types</a></li>
<li><a href="#ie8">IE8 needs our help</a></li>
<li><a href="#ie6">IE6 end-of-life</a></li>
<li><a href="#type">File &amp; content types</a></li>
<li><a href="#html">HTML content: iFrames, AJAX, inline DIVs &amp; direct</a></li>
<li><a href="#multimedia">Multimedia: Flash, Silverlight, QuickTime, YouTube, PDF, etc.</a></li>
<li><a href="#autoheight">Let floatbox set content height</a></li>
<li><a href="#cycler">Cycling images and thumbnails</a></li>
<li><a href="#tooltip">Enhanced tooltips</a></li>
<li><a href="#popup">Popup thumbnails</a></li>
<li><a href="#captions">Captions</a></li>
<li><a href="#header">Header and Footer</a></li>
<li><a href="#info">Info box for secondary content</a></li>
<li><a href="#print">Print contents</a></li>
<li><a href="#newwindow">Open in a new window</a></li>
<li><a href="#indexlinks">Index links in a gallery</a></li>
<li><a href="#navigation">Navigation and Controls</a></li>
<li><a href="#layout">Layout</a></li>
<li><a href="#appearance">Appearance and Colors</a></li>
<li><a href="#background">Custom background image</a></li>
<li><a href="#language">Language localization</a></li>
<li><a href="#auto">Auto-start and exit tasks</a></li>
<li><a href="#imagemap">Image map areas</a></li>
<li><a href="#iniframes">Running in iFramed pages</a></li>
<li><a href="#framed">Constraining Floatbox to a particular iFrame (or frameset child)</a></li>
<li><a href="#altcontent">Accessible content (Section 508)</a></li>
<li><a href="#attachto">Attach to a specific document element</a></li>
<li><a href="#dynamic">Dynamically loading Floatbox content via AJAX or UpdatePanel</a></li>
<li><a href="#wordpress">WordPress and other templated systems</a></li>
<li><a href="#actionscript">Launching floatbox from flash ActionScript</a></li>
<li><a href="#gzip">Serving gzip compressed files on Apache and IIS</a></li>
<li><a href="#library">Using the library functions</a></li>
</ul>

<div id="quickstart" class="separator"></div>
<h4>Quick-start</h4>
<p>
Floatbox is simple to install and use, even though it may appear at first glance to be complex due to its numerous options and capabilities.
The following three steps are all you need to get floatbox content lit up on your pages.
</p>
<ol>
<li><b>Install</b> -
Open the downloaded zip file and drag or copy the entire floatbox folder from that zip file to the root folder of your site,
or push the whole floatbox folder and its contents up to your hosted site.
</li>
<li><b>Include</b> -
Add the following two lines to the &lt;head&gt; section of the pages where you want to use floatbox.<br />
<span class="code notranslate">&lt;link type="text/css" rel="stylesheet" href="/floatbox/floatbox.css" /&gt;</span><br />
<span class="code notranslate">&lt;script type="text/javascript" src="/floatbox/floatbox.js"&gt;&lt;/script&gt;</span><br />
</li>
<li><b>Use</b> -
Create an anchor element with a class of "floatbox" and an href that points to your content. Something like:<br />
<span class="code notranslate">&lt;a href="myPic.jpg" class="floatbox"&gt;click me&lt;/a&gt;</span><br />
</li>
<li>
There is no step 4. You're done.
But to get the most out of floatbox and use its more advanced features you really should read the rest of these instructions,
the <a href="options.html">options reference</a>, the programmer's <a href="api.html">API reference</a>, the <a href="license.html">license terms</a>,
and also check out the <a href="http://randomous.com/floatbox/demo">demo page</a>.
These reference materials are in the docs folder of the downloaded zip file and also online on the <a href="http://randomous.com/floatbox/home">randomous.com</a> site.
The online reference materials always pertain to the latest floatbox version.
</li>
</ol>
<p>
<a href="#index">Back to Index</a>
</p>

<div id="activation" class="separator"></div>
<h4>Activating elements</h4>
<p>
Anchors (and area maps) on a page are marked to be opened in floatbox by having a class name of 'floatbox' assigned directly to them, or assigned to a containing element (usually a div).
Both of the following have the same effect:
<span class="blockcode notranslate">
&lt;a href="pic1.jpg" class="floatbox"&gt;Foo&lt;/a&gt;<br />
&lt;a href="pic2.jpg" class="floatbox"&gt;Bar&lt;/a&gt;
</span>
...and...
<span class="blockcode notranslate">
&lt;div class="floatbox"&gt;<br />
&nbsp;&nbsp;&lt;a href="pic1.jpg"&gt;Foo&lt;/a&gt;<br />
&nbsp;&nbsp;&lt;a href="pic2.jpg"&gt;Bar&lt;/a&gt;<br />
&lt;div&gt;
</span>
</p><p>
Assigning the floatbox class to each item is conceptually simpler,
but if you have a number of items on a page to open in floatbox, it's probably cleaner and quicker to put the floatbox class on a containing div rather than on each item.
</p><p>
When using the containing div approach, there are two ways to limit which links in the containing will get activated.
The first is to set the 'autoTypes' option on the containing div to the content types you want Floatbox to activate.<br />
For example, <span class="code notranslate">&lt;div class="floatbox" data-fb-options="autoTypes:image|flash"&gt;</span>
will activate only links to images or flash files within the div.
The second way to limit which links get activated is to assign <span class="code notranslate">class="nofloatbox"</span>
to specific anchors you want to exclude from activation.
</p><p>
All the demo page examples place the floatbox class on each anchor because people seem to like pasting those examples into their own content.
Since they each have their own classname assigned, the examples are functionally self-contained.
If it were not for this copying, the demo page would be setup with the floatbox class placed only once on a containing div.
However, the containing div approach is certainly not mandatory.
It is perfectly functional to use the more traditional approach of marking each anchor with its own floatbox class.
</p><p>
Things to note:
</p>
<ul>
<li>When a containing div is used, any data-fb-options settings (see 'Configuring options' below) on that div will be inherited by the child anchors along with the floatbox class.</li>
<li>A page's &lt;body&gt; element can be used as the containing element to auto-apply the floatbox class to all links in the document's body.</li>
<li>The class attribute can hold more than one class name by separating them with spaces:
<span class="code notranslate">class="myclass floatbox"</span> is perfectly legal and effective in all browsers.</li>
<li>For backward compatibility, the 'floatbox' name can be assigned to a 'rel' attribute on the anchor.
Also, the rel attributes 'gallery', 'slideshow', 'iframe', 'lytebox', 'lyteshow', 'lyteframe', and 'lightbox'
are recognized to ease transition from very old floatbox versions or the lytebox and lightbox utilities.</li>
</ul>
<p>
In addition to the core floatbox display, the Floatbox library includes capabilities to show cycling image sets, enhanced tooltips, and popup thumbnails.
These additional capabilities are also enabled by assigning class names to elements.
Please see the relevant sections of these instructions for details on how to configure these capabilities.
</p>
<p>
<a href="#index">Back to Index</a>
</p>

<div id="options" class="separator"></div>
<h4>Configuring options</h4>
<p>
Floatbox options are used to set appearance preferences, size the floatbox, group items into sets, assign captions, etc.
There are 3 different ways to set configuration options for floatbox.
In order of precedence, options can be set from:
</p>
<ol>
<li>data-fb-options or rev attribute settings placed directly on an anchor (link), or inherited from a containing 'floatbox' classed element (see 'Activating elements' above).
These apply only to the item(s) they are assigned to.</li>
<li>fbPageOptions, fbChildOptions, fbTypeOptions &amp; fbClassOptions javascript objects (associative arrays) defined on the host page.
These settings apply to all floatboxed anchors on the page.
</li>
<li>globalOptions set in the floatbox/options.js file apply to floatboxed items across the entire site.</li>
</ol>
<p>
If you have a number of different floatboxed items on your site, it's a good idea to organize your option preferences based on the scope you want those options applied to.
For example, a specific anchor pointing to html content may have a 'width' option set directly on it,
while setting 'cornerRadius' for all image content would best be done in the typeOptions section of the globally applied floatbox/options.js file.
</p><p>
Details of the various option-setting methods follow.
Don't overlook reading the <a href="options.html">options reference</a>.
You'll get the best understanding of the numerous other floatbox options from there.
(Note that option names and values are case-sensitive.)
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="anchoroptions" class="separator"></div>
<h4>Setting options directly on anchors</h4>
<p>
Options for a particular anchor get set in that anchor's data-fb-options or rev attribute.
The general syntax is:<span class="blockcode notranslate">&lt;a href="xyz" <b>data-fb-options="option1:value1 option2:value2 etc."</b>&gt;</span>
Using the rev attribute is equivalent. ('data-fb-options' validates on html5 and 'rev' validates on earlier doctypes.)
All the documentation samples and the demo page use the data-fb-options attribute,
but there is no problem if you have a preference for placing options on the rev attribute instead.
<span class="code notranslate">rev="option1:value1 option2:value2 etc."</span>
</p><p>
When running a series of floatboxed items such as a gallery set or a slideshow,
many of the options from the clicked anchor will apply globally to all items in the set.
Some other options apply on a per item basis.
It should usually be apparent from context which options are per item.
For example, <span class="code notranslate">width</span> and <span class="code notranslate">backgroundColor</span> are per item
whereas <span class="code notranslate">cornerRadius</span> and <span class="code notranslate">colorTheme</span> apply to the whole set.<br />
</p><p>
There's lots of examples of options set on anchors over at the <a href="http://randomous.com/floatbox/demo">demo page</a>.
One example that some people find useful in its own right, and that should give a good sense of how options can be used, is the following anchor which will start a slideshow:
<span class="blockcode notranslate">
&lt;a href="" class="floatbox" data-fb-options="doSlideshow:true group:myShow showThis:false endTask:exit autoFitImages:true navType:none"&gt;Slideshow&lt;/a&gt;
</span>
Here we are telling floatbox to start a slideshow, to use the gallery set that is defined with the group string 'myShow', that the current anchor should not be part of that slideshow set, images should be scaled down to fit the screen, and no navigation controls should be shown in the floatbox.
</p><p>
The option string syntax is quite flexible.
Name:value pairs can be separated by spaces, semi-colons, commas or ampersands.
The delimiter between a name and its value can be a colon or an equals sign.
Pixel values can be given with or without the 'px' suffix.<br />
<span class="code notranslate">"colorTheme:red width:200"</span>,
<span class="code notranslate">"colorTheme:red; width:200px;"</span>,
<span class="code notranslate">"colorTheme:red, width:200"</span> and
<span class="code notranslate">"colorTheme=red&amp;width=200"</span>
are all allowed and equivalent.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="pageoptions" class="separator"></div>
<h4>Setting page-specific options</h4>
<p>
The majority of floatbox's options are not item-specific and can be defined per page or globally rather than repeated on each anchor.
Use fbPageOptions to assign option settings to all items on a page,
fbChildOptions to assign settings to secondary floatboxes only,
fbTypeOptions for settings to be applied to items of a particular type,
and fbClassOptions for settings applied to all items on a page that have a particular class name assigned to them.
Each of these sets of options are defined by a javascript object in a page's &lt;head&gt; section.
</p><p>
<b>fbPageOptions</b><br />
This example sets a shadow type, animation values and navigation type for all floatbox items on a single page:<br />
<span class="blockcode notranslate">
&lt;script type="text/javascript"&gt;<br />
&nbsp;&nbsp;fbPageOptions =  {<br />
&nbsp;&nbsp;&nbsp;&nbsp;shadowType: 'halo',<br />
&nbsp;&nbsp;&nbsp;&nbsp;resizeDuration: 5.5,<br />
&nbsp;&nbsp;&nbsp;&nbsp;imageFadeDuration: 4.5,<br />
&nbsp;&nbsp;&nbsp;&nbsp;overlayFadeDuration: 0,<br />
&nbsp;&nbsp;&nbsp;&nbsp;navType: 'both'<br />
&nbsp;&nbsp;};<br />
&lt;/script&gt;<br />
</span>
Note the syntax: there are commas after each name:value pair except for the last one.<br />
The configurator (described below) can be used to assist in building fbPageOptions.
</p><p>
<b>fbChildOptions</b> can be defined on a page using the same structure and syntax as fbPageOptions but in this case
the settings will apply only to secondary floatboxes and won't apply to the primary or first box opened.
</p><p>
Use <b>fbTypeOptions</b> and <b>fbClassOptions</b> to assign settings based on content type or class name.
The syntax for these two is a bit different from that for fbPageOptions.
Each type or class is assigned a string of name:value pairs in the same format used for an anchor's data-fb-options attribute.
</p><p>
For example, to assign settings to items with a class of 'redThings' and other settings to 'class49':
<span class="blockcode notranslate">
&lt;script type="text/javascript"&gt;<br />
&nbsp;&nbsp;fbClassOptions =  {<br />
&nbsp;&nbsp;&nbsp;&nbsp;redThings: 'colorTheme:red width:444 height:333 scrolling:no',<br />
&nbsp;&nbsp;&nbsp;&nbsp;class49: 'cornerRadius:8 enableDragMove:true showItemNumber:false'<br />
&nbsp;&nbsp;};<br />
&lt;/script&gt;<br />
</span>
</p><p>
And, to set options based on content type:
<span class="blockcode notranslate">
&lt;script type="text/javascript"&gt;<br />
&nbsp;&nbsp;fbTypeOptions =  {<br />
&nbsp;&nbsp;&nbsp;&nbsp;iframe: 'modal:false showNewWindow:true',<br />
&nbsp;&nbsp;&nbsp;&nbsp;flash: 'width:480 height:385 enableDragResize:true'<br />
&nbsp;&nbsp;};<br />
&lt;/script&gt;<br />
</span>
</p><p>
Valid content types are 'image', 'html', 'media', 'tooltip', any of the html sub-types 'iframe', 'inline', 'ajax' &amp; 'direct', any of the media sub-types 'flash', 'quicktime', 'wmp', 'silverlight' &amp; 'pdf', and 'tooltip' (which isn't really a content type).
</p><p>
When running floatbox in a hierarchy of iframed pages, these page-specific option objects need to be placed on the top (base) document.
The settings will apply to content within iframes on the page provided those iframes are sourced from the same domain.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="globaloptions" class="separator"></div>
<h4>Setting site-wide options</h4>
<p>
Global option preferences apply to all pages on your site and are defined in the options.js file located directly in the floatbox install folder.
In previous Floatbox versions, global options were set by editing the floatbox.js file.
This has moved to options.js specifically so that the options settings can be easily imported into subsequent versions after performing a version upgrade.
</p><p>
There are four sections to the options.js file, corresponding to the four places you can place page-specific options as described above.
The <b>globalOptions</b> section should be self-explanatory: settings here apply globally across your site.
The <b>childOptions</b> section assigns settings only for secondary floatboxes.
<b>typeOptions</b> assigns settings across the site, but only to items of the assigned floatbox type.
See fbTypeOptions above for syntax and a list of available floatbox types.
<b>classOptions</b> is similar to typeOptions but assigns settings site-wide to items with a matching class name.
</p><p>
The globalOptions section of options.js also holds the floatbox license key.
(See the license key section of these instructions for details.)
It is a straight-forward matter to edit options.js with any text editor.
You can also use the configurator described below to assist in creating the globalOptions section of options.js.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="configurator" class="separator"></div>
<h4>Using the Configurator to setup global and page-specific options</h4>
<p>
The Floatbox package includes a Configurator page that can be used to generate the globalOptions section of options.js
or an fbPageOptions object definition by selecting option settings from a form.
This can be quicker and less error-prone than manually typing up your preferences directly.
The Configurator cannot write to a file system.
It presents the globalOptions or fbPageOptions code for you to copy and paste into the floatbox/options.js file or into your individual pages.
You can of course use a combination of the configurator and editing your options directly with a text editor - whatever works.
</p><p>
Open configurator.html in your floatbox install folder with any browser.
Select your option preferences on the form and click one of the buttons to generate your globalOptions or fbPageOptions code.
The object definition shown will be only those settings that differ from the floatbox builtin defaults.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="licensekey" class="separator"></div>
<h4>License key</h4>
<p>
The downloaded floatbox package is for evaluation, development and testing and does not have a license key bundled with it.
Without a valid license key, floatbox will periodically show a registration reminder.
You can acquire a license key from the <a href="http://randomous.com/floatbox/register">Floatbox registration</a> page.
When you have acquired and installed a license key matched to your production site's domain, you will be legally entitled to deploy the floatbox software to that site and the registration reminders will not occur.
You do not need a license key for development or evalution work.
The floatbox package is complete and fully functional without a license key.
</p><p>
License keys are installed by being placed in the floatbox/options.js file.
You can edit this file directly or use the <a href="#configurator">configurator</a>.html form to assist.
The location for the licenseKey in options.js looks like this:
<span class="blockcode notranslate">
globalOptions: {<br />
&nbsp;&nbsp;licenseKey: "",
</span>
The key goes between the quotes.
</p><p>
The license key can also be set directly on your page with the "fbPageOptions" script object (see "<a href="#pageoptions">Setting page-specific options</a>" below).
A bare-bones fbPageOptions definition with a licenseKey looks like this:
<span class="blockcode notranslate">
&lt;script type="text/javascript"&gt;<br />
fbPageOptions =  {<br />
&nbsp;&nbsp;licenseKey: 'abcd1234'<br />
};<br />
&lt;/script&gt;<br />
</span>
The configurator can help build fbPageOptions as well as the globalOptions in options.js.
</p><p>
If upgrading from a previous floatbox version that used licenseKey.js, you will need to copy the license key from that old file into options.js as described above.
</p><p>
The license key can be tested by loading a page that has floatbox included and then running
<span class="code notranslate">javascript:fb.key()</span>
from the browser's address bar.
</p><p>
License keys are matched to the registered domain and all checking that the key matches is done by the floatbox code entirely within the browser.
There is no check made to a registration db anywhere and no 'phoning-home' of any kind.
</p><p>
If you are a publisher of multiple web sites and have registered your sites for licensed floatbox usage,
you have the option of generating a multi-site "master" key for all your registered domains.
This is a single license key that will be valid on each of your registered domains.
Using such a multi-site license key can simplify deployment by allowing use of a single distribution source with no need to match individual keys to individual deployments.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="installation" class="separator"></div>
<h4>Installation alternatives</h4>
(You don't need to read this section if you are using the standard install location.)
<p>
The quick-start instructions above have you copying the floatbox folder to the root of your site.
Some folks prefer to place the floatbox package within another sub-folder.
This is fine. You just have to adjust the given include lines for floatbox.css and floatbox.js so that they match the location of the files.
For example, if the floatbox files are placed in the folder /includes/floatbox/, the two include lines in the &lt;head&gt; section would need to be:<br />
<span class="code notranslate">&lt;link type="text/css" rel="stylesheet" href="/includes/floatbox/floatbox.css" /&gt;</span><br />
<span class="code notranslate">&lt;script type="text/javascript" src="/includes/floatbox/floatbox.js"&gt;&lt;/script&gt;</span>
</p><p>
There are many supporting files included in the floatbox download. They are nearly all needed for correct functioning.
Floatbox is modular. It loads its javascript modules and language localization files on demand as required, but it needs to find these files in order to do so.
It is highly recommended that you keep the floatbox folder intact and not try to separate the components out to different folder locations.
If the install folder is kept intact, floatbox will auto-detect its modules, graphics and languages locations.
If you break up the install into different locations (not recommended),
the "modules", "languages", and "graphics" paths will need to be explicitly set at the top of the floatbox.js file.
If the floatbox.js file has been renamed to something else, perhaps merged with other javascript files on your site,
the "installBase" path needs to be set.
This will tell floatbox where to find options.js and the default location for the other folders.
Use absolute, not relative, paths for these custom path settings.
If you alter the path relationship between floatbox.css and the graphics folder,
floatbox.css will also need to be updated with the correct relative paths to the background images.
(Really, just leave the floatbox folder structure intact. Everyone will be happier.)
</p><p>
If you are developing your site on a local file system rather than working from a web server,
the root of your "site" will be the root folder of your drive.
If you're on C: drive on a Windows system, the floatbox files should be in the C:\\floatbox\\ folder.
Alternatively, you may want to use relative paths for your include paths such as
<span class="code notranslate">src="floatbox/floatbox.js"</span> or
<span class="code notranslate">src="../floatbox/floatbox.js"</span>, etc.,
depending on where the files are relative to the page the include lines are on.
(It's easier to develop on a real web server and just use the same absolute paths everywhere.)
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="upgrade" class="separator"></div>
<h4>Upgrading</h4>
<p>
Upgrading to a new version of floatbox entails replacing the entire contents of your existing floatbox folder.
The javascript modules, css files, graphics and languages can all change between versions and all the components need to be in sync.
As of version 4.0, you can set your default preferences in the new options.js file.
(The default options are no longer editable directly in the floatbox.js file.)
To bring a license key in from an earlier version, paste the key into options.js.
</p><p>
Problems resulting from visitors pulling old floatbox files from their local cache after an upgrade can be avoided by adding a querystring to the floatbox include paths.
A querystring on the floatbox.js include line will be used during the dynamic load of the js modules as well.
Like this:
<span class="blockcode notranslate">
&lt;link type="text/css" rel="stylesheet" href="/floatbox/floatbox.css?v=1.23" /&gt;<br />
&lt;script type="text/javascript" src="/floatbox/floatbox.js?v=1.23"&gt;&lt;/script&gt;
</span>
When you next upgrade floatbox, change the querystring to the new version number.
</p><p>
Floatbox has strong backward compatibility with previous versions.
While many option names and api functions may have changed, the old functions and markup are still supported.
It is not necessary to modify existing working pages when you do a version upgrade.
</p><p>
There are two important exceptions to the above-mentioned backward compatibility.
</p><p>
First, the old licenseKey.js file is no longer used and won't be recognized.
Ideally, paste your license key into the licenseKey field in options.js.
The license key can also be placed in an fbPageOptions definition but it will then apply only to the page it occurs on.
</p><p>
The second change is that framebox.js no longer ships with floatbox.
In its place, change the old framebox.js include line to use floatbox.js instead
and either add a 'framed' querystring parameter to the floatbox.js path
or set 'framed' to true in fbPageOptions.
See <a href="#framed">below</a> for details.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="doctype" class="separator"></div>
<h4>Doc Types</h4>
<p>
Floatbox does not support <a href="http://en.wikipedia.org/wiki/Quirks_mode">quirks mode</a>.
All pages that include floatbox content need to have a valid doctype declaration at the top of the page which will set the browser to render in standards-compliant mode.
If you don't know what doctype to use, the simple HTML5 doctype declaration <span class="code notranslate">&lt;!DOCTYPE html&gt;</span> is an excellent choice.
Note that for Internet Explorer, if anything at all appears above the doctype declaration, quirks mode will be set.
So please don't put an html comment or an xml declaration such as <span class="code notranslate">&lt;xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;</span> at the top of your pages.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="ie8" class="separator"></div>
<h4>IE8 needs our help</h4>
<p>
The rendering engine in Internet Explorer 8 is extremely slow and inefficient at javascript animations such as element resizing and opacity fades.
IE7 was not great in this respect, but IE8 is very poor.
There is some code in floatbox to significantly speed up IE8 animations, but the trade-off is that this results in choppiness.
</p><p>
To get the best effects in all browsers, it is highly recommended that all pages that show animated floatbox content send a header to IE8 to set it to IE7 compatibility mode.<br />
Do this by adding a meta tag to your page's &lt;head&gt; section:
<span class="code notranslate">&lt;meta http-equiv="X-UA-Compatible" content="IE=7" /&gt;</span><br />
Or, from php, send the header directly with <span class="code notranslate">header('X-UA-Compatible: IE=7');</span><br />
Or, from ASP.NET C#,  <span class="code notranslate">Response.AppendHeader("X-UA-Compatible", "IE=7");</span>
</p><p>
There is a problem with sending the IE7 header unconditionally to all browers.
IE9's rendering engine is excellent and it does not suffer the weaknesses of IE8,
but the X-UA-Compatible header will knock IE9 back to IE7 compatibility mode too, which we don't want.
The only way to handle this is with server side code that detects a request coming from IE8 and sends the header only to that browser.<br />
</p><p>
For example, in PHP:
<span class="blockcode notranslate">
if (strpos(\$_SERVER['HTTP_USER_AGENT'], 'Trident/4.0;') && strpos(\$_SERVER['HTTP_USER_AGENT'], 'MSIE 8.0;')) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;header('X-UA-Compatible: IE=7');<br />
}
</span>
</p><p>
Or, ASP.NET C#:
<span class="blockcode notranslate">
if (Request.UserAgent.Contains("Trident/4.0;") && Request.UserAgent.Contains("MSIE 8.0;")) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;Response.AppendHeader("X-UA-Compatible", "IE=7");<br />
}
</span>
</p><p>
If serving plain html, there is no facility to send headers conditionally.
(A meta tag to send the header won't work if placed inside conditional comments).
You will need to make the choice between allowing choppy animation in IE8's slow native mode or forcing IE9 back to IE7 compatibility mode too.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="ie6" class="separator"></div>
<h4>IE 6 end-of-life</h4>
<p>
Floatbox works fine in Internet Explorer 6 but has some reduced functionality.
In particular, drop shadows and disableScroll (fixed positioning) are not available.
</p><p>
Many sites and template authors are now dropping support for IE 6 by no longer doing the extensive amount of work required to get pages rendered properly in IE 6.
Floatbox has the capability to present an IE 6 end-of-life screen to users of that browser when they first visit a site.
This popup encourages those visitors to upgrade their browsers and embeds the
<a href="http://www.browserchoice.eu/">http://www.browserchoice.eu/</a> page into the floatbox.
The end-of-life notice uses a session cookie to make sure it is presented only once per visit.
There is a checkbox the visitor can use to turn the notice off for 75 days.
The notification page is auto-translated into the visitor's native browser language whenever it is displayed.
You can see the IE 6 end-of-life notice (untranslated English version) on the HTML tab of the Floatbox demo page.
</p><p>
The IE 6 end-of-life notice is not enabled by default, but all Floatbox users are strongly encouraged to turn it on.
Do this with a direct edit of the showIE6EndOfLife setting in options.js or by using the configurator form to manage your default options.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="type" class="separator"></div>
<h4>File &amp; content types</h4>
<p>
Floatbox determines what kind of content is being requested based on the file extension from an anchor's href attribute.
Sometimes you may need to over-ride that detection and specify a content type directly.
Content type over-ride is always required when loading ajax,
and can also be needed when you have a .php or .aspx page serving images.
</p><p>
By default, .php and .aspx urls will be loaded as iframes.
To make them load as images, set "type:image" on the anchor's data-fb-options attribute.
If you're fetching AJAX content, you need a "type:ajax" over-ride in the options.
</p><p>
Example:<br />
<span class="code notranslate">
&lt;a href="getPix.php?pic=29" class="floatbox" <b>data-fb-options="type:image"</b>&gt;...&lt;/a&gt;</span>
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="html" class="separator"></div>
<h4>HTML content: iFrames, AJAX, inline DIVs &amp; direct</h4>
<p>
Floatbox handles 3 broad categories of content: images, html and multi-media.
This section describes handling html content.
</p><p>
There are 4 ways to load html into a floatbox: as an iframe, using AJAX, using content from inline hidden DIVs, and using a direct html string as the content source.
Standard anchor hrefs that aren't recognized as an image or multi-media type will be loaded as iframe content by default.
To load that html content with AJAX, you need to put "type:ajax" in the anchor's data-fb-options attribute.
To load content from an inline div, give that div a unique id and reference that div's id in the anchor's href attribute preceeded by "#" (e.g., href="#myDiv").
A string of direct HTML can be used as the source parameter to the fb.start() API function.
Direct HTML content must include at least one each of '&lt;' and '&gt;' to be recognized as HTML content.<br />
See below for examples.
</p><p>
There's lots of useful options that can be assigned to floatboxed html content.
Please look through the <a href="options.html">options reference</a> to get an idea of what's available.
Good ones to be aware of are 'width', 'scrolling', 'backgroundColor', 'autoFitHTML', 'showNewWindow', 'showPrint', and the '*Pos' positioning settings.
It's also worthwhile to check out the 'Let floatbox set content height' section further down in these instructions.
</p><p>
Here's some examples of floatboxed anchors that load html content:<br />
iframe: <span class="code notranslate">&lt;a href="mypage.html" class="floatbox" data-fb-options="width:400 height:530 scrolling:no"&gt;...&lt;/a&gt;</span><br />
ajax: <span class="code notranslate">&lt;a href="myajaxpage.html" class="floatbox" data-fb-options="type:ajax width:400"&gt;...&lt;/a&gt;</span><br />
inline div: <span class="code notranslate">&lt;a href="#divID" class="floatbox"&gt;...&lt;/a&gt;</span>
And one example of direct html in an API call:<br />
<span class="code notranslate">fb.start( '&lt;span&gt;Eat a Peach&lt;/span&gt;', 'width:150 showPrint:true' );</span>
</p><p>
The following section gives information about loading multimedia content, either directly to a plugin or as iframe content.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="multimedia" class="separator"></div>
<h4>Multimedia: HTML5, Flash, Silverlight, QuickTime, YouTube, PDF, etc.</h4>
<p>
An increasingly popular way to serve video content is to embed it as an iframe element and let the iframe content handle the complications of serving the video in different formats to different browsers depending on the browser's capabilities.
Currently YouTube, Vimeo and DailyMotion are all providing embed code that uses this iframe approach.
</p><p>
While somewhat complex, you can create your own locally served video sources and present them in an iframe that uses Flash where that is available, and uses HTML5 video on browsers that support that.
An excellent guide for doing this can be found at <a href="http://diveintohtml5.org/video.html">http://diveintohtml5.org/video.html</a>.
You may also want to use an iframe source for your videos if you want more control over presentation or handling than direct-loading with a plugin will provide.
</p><p>
Direct load a video iframe, whether your own or from an online service, by setting the "type:video" option on a floatboxed anchor whose href points to the iframe source.
</p><p>
Traditional multi-media embeds target a particular browser plugin (flash, quicktime, etc.).
The following paragraphs discuss direct-load of these traditional embeds with Floatbox.
</p><p>
Traditional multi-media content type is recognized by Floatbox based on the file extension in an anchor's href.
Recognized file extensions and the associated plugins are:<br />
Flash - .swf<br />
Adobe Reader - .pdf<br />
Silverlight - .xap<br />
Quicktime - .mov, .movi, .movie, .mpg, .mpeg, .3gp, .3g2, .m4v, .mp4, .m1v, .mpe, .qt<br />
Windows Media Player - .wm, .wmv, .avi, .asf<br />
In addition to locally served multi-media files, you can load floatbox content directly from online video services such as YouTube, Vimeo, Metacafe and others.
If the required plugin is not available on the client browser, floatbox will display a notice (localized to the site visitor's language) with a link to the plugin download page.
</p><p>
Both Windows Media Player and Quicktime can display content of type mpg, mpeg, avi, m1v and mpe.
For these file types, the visitor's browser will be queried for available plugins and the video will be shown with whichever plugin is present.
</p><p>
For flash content, floatbox assigns the following parameter default values: wmode=window, allowfullscreen=true, allowscriptaccess=always, scale=exactfit, play=true, quality=high.
You can over-ride these plus 'bgcolor', 'base', 'menu' and 'salign' by providing new values in the href url's querystring.<br />
e.g., <span class="code notranslate">&lt;a href="myflash.swf?wmode=opaque&amp;amp;bgcolor=#ffffff&amp;amp;scale=default" class="floatbox" data-fb-options="width:320 height:240 scrolling:no"&gt;...&lt;/a&gt;</span><br />
</p><p>
If your flash object requires flashvars to be set, you can put these flashvars in the href url's querystring.
Flash always treats flashvars and querystring vars equivalently and it doesn't matter in which location the settings appear.
If your flash content requires a minimum version of the flash plugin, this can be specified with the minFlashVersion option, described in the Options Reference.
</p><p>
Youtube videos have the following two additional parameters that can be set via the href's querystring:
<span class="code notranslate">fs=0</span> to disable fullscreen capability, and
<span class="code notranslate">start=xx</span> to start playing xx seconds into the video.
</p><p>
Quicktime default parameters are autoplay=true, bgcolor='', controller=true, kioskmode=true, loop=false, showlogo=false and scale=tofit.
Windows Media Player default parameters are autoStart=1, showControls=1, showDisplay=0, showStatusBar=0, loop=0, animationAtStart=1 and transparentAtStart=0.
All Silverlight control parameters are available and left as defaults.
All supported parameters can be overridden with new values passed on the href or URL's querystring in the same manner as described for flash.<br />
</p><p>
When loading videos from an online video service such as YouTube or Vimeo,
you need to determine the href path to use and the width and height dimensions.
For YouTube, Vimeo and Vivo, use the site's page url for the href, or, alternatively, use the embed path available from the site.
For other online video services you must use the embed path.
</p><p>
Most video services show you the embed code directly or have a "share" button that will show this code.
This is where you can look up the width and height.
The easiest approach is to look at the examples in the Multimedia section of the <a href="demo">demo page</a> for the video service you are interested in,
modelling your anchors after the ones given there and changing the parameters to point to the videos you are interested in loading.
</p><p>
Note that many popular online video services will present the iframe embed (described above) by default.
If you are using these iframe embeds, set the "type:video" option to let Floatbox know that the iframe source is not to be handled as html content.
To use the traditional plugin-based embeds, you need to select "old embed code" from the online service to get the required embed path.
</p><p>
PDF documents can be direct-loaded using the Adobe Reader plugin, or can be loaded as flash through the scribd.com service
(see the example on the Bonus2 tab on the demo page).
When direct-loading pdf, numerous parameters can be specified on the URL.
The pdf sample on the Multimedia tab of the demo page opens a document that lists and describes the available parameters.
Note that IE is very buggy when showing pdf files from another domain, whether direct-loaded or as iframe content.
To make IE happy, bring all pdf files into your site and serve them from the same domain the host page is running on.
</p><p>
The object element used to show traditional plugin-based multi-media in floatbox is assigned an id of "fbMedia".
This can be used if script access to the object instance is required.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="autoheight" class="separator"></div>
<h4>Let floatbox set content height</h4>
<p>
Floatbox can measure and set the dimensions for HTML content.
It's a good idea to let floatbox do this, especially for height, so that the box dimensions will look correct in different browsers.
Different browsers layout content slightly differently from each other, and the right box height in one browser can be too short or too tall in another.
The best approach for ajax, inline and direct html is to constrain the content's width either by setting a floatbox width option or defining a width in the html styles,
and then let floatbox measure the height. When no height is specified for these content types, the height will be measured and adjusted automatically.
Not all content can be successfully measured, but most can.
Scrolling and positioned elements in the content are the most likely to measure incorrectly.
</p><p>
Iframe content (normal web pages shown in a floatbox) that originates from the same domain as the host page can auto-set height too, but in a slightly different fashion.
If the scrolling option is set to 'no' for the floatbox that is showing the iframe, the floatbox height will be adjusted to the content height once the iframe completes loading.
If you don't want a particular iframe to have the box height set automatically, do not set scrolling to 'no'; leave it at the default of 'auto'.
Cross-domain iframe content cannot be measured and so its box height cannot be automatically set.
Iframe content with a style of 'height:100%" assigned to its body or html element will not measure successfully. Remove that style.
</p><p>
iPhones and other Mobile Safari based agents behave a litte differently than described above for standard desktop browsers.
Scrollbars are automatically turned off for all html content, the content's full height is measured, and the floatbox is displayed using the measured full content height.
Scrolling individual elements such as a floatbox is difficult and awkward on touch devices, and even when the element is scrollable there is no visual indication of this (such as scrollbars) for the user.
Displaying content at full height on these devices allows the content to be viewed using standard touch-drag gestures.
</p><p>
It can sometimes be useful to set the 'mobileNewWindow' option to true for large content that may not be suitable to show in a floatbox on a small mobile device screen.
This will cause the floatbox content to open in a new browser window for Mobile Safari devices while retaining standard Floatbox display for all other agents.
Because cross-domain iframe content cannot be measured, it will always be opened in a new window on Mobile Safari devices.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="cycler" class="separator"></div>
<h4>Cycling images and thumbnails</h4>
<p>
Floatbox includes a module for displaying a set of images or thumbnails that will fade and cycle through each image in succession.
This can be an effective way to show dynamically changing images, setup a slideshow link or put a dynamic header at the top of a web page.
See examples of this under the "bonus" tab on the <a href="http://randomous.com/floatbox/demo">demo page</a>.
The sample code under those demos are a good way to get started with your own cycle set.
</p><p>
The cycleInterval and cycleFadeDuration options are used to control timings.
cycleFadeDuration controls how quickly the images fade in and out while cycleInterval controls how long the images will be displayed before fading to the next image.
The cycle interval includes the time taken for the fade effect to complete.
There is also a cyclePauseOnHover setting which, if set to true, will pause a cycler div when the mouse is hovered over it.
</p><p>
The set of images to be cycled goes inside a div with a class of "fbCycler" assigned to it.<br />
<span class="code notranslate">&lt;div class=&quot;fbCycler&quot; style=&quot;height:420px;&quot;&gt;</span><br />
It's best to assign a specific height to that div which fits the tallest image in the set,
otherwise it might look a little odd as the div grows to accommodate new images that cycle in.
</p><p>
The first image in the cycler set is just a normal image element and will be the only one shown if javascript is disabled:
e.g., <span class="code notranslate">&lt;img src=&quot;image1.jpg&quot; /&gt;</span><br />
</p><p>
The other images in the fbCycler div are setup a little differently and will start off hidden by floatbox.css:<br />
<span class="code notranslate">&lt;img data-fb-src=&quot;image2.jpg&quot; /&gt;</span><br />
Notice that we use the data-fb-src attribute to specify the path to the image file, instead of the normal src attribute.
This is done to speed up page loading.
If we assigned a src attribute to each of the hidden images, all the images in the set would be loaded at page start time.
The floatbox code will move the data-fb-src values into the src attribute one at a time as the images are cycled in.
(You can instead use the longdesc attribute for the alternate src reference if you like.)
If you're concerned about the img elements with no src attribute failing validation,
assign a tiny image like blank.gif as the initial src value.
</p><p>
Add a few more images and close the div and the basic cycle set is finished.
</p><p>
Captions can be added to the cycling images. These captions will be centered below the image.
Assign a caption by bundling both the img element and span element together inside a div.  Like this:<br />
<span class="code notranslate">&lt;div&gt;&lt;img data-fb-src=&quot;image3.jpg&quot; /&gt;&lt;span&gt;text for image3&lt;/span&gt;&lt;/div&gt;</span>
</p><p>
The cycling thumbnails can be anchor elements marked up for floatbox behaviour,
giving a nicely integrated floatbox gallery that will open on  thumbnail click.
Such a set looks similar to the basic cycling image set described above but, instead of putting img elements in the set,
we put anchors in and assign a floatbox class to the containing div.
Like this:
<span class="blockcode notranslate">
&lt;div class=&quot;fbCycler floatbox&quot; data-fb-options=&quot;group:cycle1&quot; style=&quot;height:100px;&quot;&gt;<br />
&nbsp;&nbsp;&lt;a href=&quot;image1.jpg&quot;&gt;&lt;img src=&quot;thumb1.jpg&quot; /&gt;&lt;/a&gt;<br />
&nbsp;&nbsp;&lt;a href=&quot;image2.jpg&quot;&gt;&lt;img data-fb-src=&quot;thumb2.jpg&quot; /&gt;&lt;/a&gt;<br />
&nbsp;&nbsp;etc...<br />
&lt;/div&gt;
</span>
Notice that the thumbnail img elements are using the "data-fb-src" trick to speed load time.
</p><p>
Caption text can be added to the cycling thumbnails or images by following the img element with a span element. Like this (for a thumbnail cycler):
<span class="blockcode notranslate">
&lt;a href=&quot;image3.jpg&quot;&gt;<br />
&nbsp;&nbsp;&lt;img longdesc=&quot;thumb3.jpg&quot; /&gt;<br />
&nbsp;&nbsp;&lt;span&gt;text for thumb3&lt;/span&gt;<br />
&lt;/a&gt;
</span>
(The 'longdesc' parameter is equivalent to 'data-fb-src' and is valid html4.)
</p><p>
cycleFadeDuration can be set only globally or per page; different cyclers on the same page cannot use different timings.
The cycleInterval setting can be assigned globally, per page, or on a per-item basis giving different display times for different items in the set.
Per-item cycleIntervals are assigned in an fb-data-options or rev attribute placed on the individual divs, anchors or images inside the fbCycler div.
Like this (for an image cycler);
<span class="blockcode notranslate">
&lt;div class=&quot;fbCycler&quot; style=&quot;height:420px;&quot;&gt;<br />
&nbsp;&nbsp;&lt;div data-fb-options="cycleInterval:6.5"&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;image99.jpg&quot; alt=&quot;&quot; /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;some dumb caption&lt;/span&gt;<br />
&nbsp;&nbsp;&lt;/div&gt;<br />
&nbsp;&nbsp;etc...<br />
&lt;/div&gt;
</span>
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="tooltip" class="separator"></div>
<h4>Enhanced tooltips</h4>
<p>
Any element on a web page can have an enhanced tooltip associated with it by assigning the element a class of "fbTooltip".
The tooltip shown on mouseover of such an element is a non-modal floatbox which can contain any content type
and can by styled with all the standard floatbox options.
</p><p>
In addition to the fbTooltip class, the host element needs to have a 'data-fb-tooltip' attribute which provides information about the tooltip to be shown.
The only mandatory entry in data-fb-tooltip is 'source', which points to the source content to be shown as the tooltip.
Additional options available for tooltips are described in <a href="options.html">the options reference</a>
and include attachToHost, moveWithMouse, placeAbove, timeout, delay, mouseSpeed, fadeDuration and defaultCursor.
</p><p>
The tooltip options can be specified per element in the data-fb-tooltip attribute,
per page by being assigned to to the tooltip type in fbTypeOptions,
or site-wide by being assigned to the tooltip type in options.js.
</p><p>
An example showing a span element with an enhanced tooltip:
<span class="blockcode notranslate">
&lt;span class=&quot;fbTooltip&quot; data-fb-tooltip=&quot;source:#hiddenDivID moveWithMouse:true&quot;&gt;Tooltip will appear when the mouse is hovered over this text.&lt;/span&gt;
</span>
See the 'Bonus2' tab of the demo page for some live examples with markup shown.
</p><p>
An enhanced tooltip can be assigned to the content shown in a standard floatbox using the tooltip option in the originating anchor's data-fb-options attribute.
The value of the tooltip option is the source of the tooltip content.
Optional settings for the tooltip can be provided in the 'tooltipOptions' setting.<br />
An example:
<span class="blockcode notranslate">
&lt;a href="image1.jpg" data-fb-options="tooltip:#myTooltipDivId tooltipOptions:`moveWithMouse:true backgroundColor:#123456`"&gt;click me quick&lt;/a&gt;
</span>
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="popup" class="separator"></div>
<h4>Popup thumbnails</h4>
<p>
You can configure anchors to have a popup thumbnail that appears when the mouse is over the anchor and disappears when the mouse moves off.
The popup thumbnails can be clicked to load an associated image in floatbox.
Combining popup thumbnails with floatbox's ability to zoom from a thumbnail to an image makes for a nice effect.
Popup thumbnails are enabled by assigning a class of "fbPopup" to the &lt;a&gt;nchor element.<br />
Here's an example:
<span class="blockcode notranslate">
&lt;a class="fbPopup floatbox" href="myImage.jpg"&gt;clickable text&lt;img src="myThumbnail.jpg" /&gt;&lt;/a&gt;
</span>
</p><p>
Popup thumbnails set with "fbPopup" appear just above the hovered anchor.
Use "fbPopdown", "fbPopleft" or "fbPopright" if you prefer the thumbnails to show on those sides of the anchor.<br />
The floatbox class assigned in the example is not required and is independent from the fbPopup class name.
This anchor is marked for both popup thumb behaviour when hovered and to open in a floatbox when clicked.
</p><p>
As you might guess, there's samples in the 'Bonus' section of the demo page.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="captions" class="separator"></div>
<h4>Captions</h4>
<p>
The standard way to show a caption in the floatbox frame area is to set the 'caption' option in an anchor's data-fb-options (or rev) attribute.
When doing this, the caption text usually needs to be wrapped in backquotes (`) so that the options string will be parsed correctly.
</p><p>
You can show two captions on the same item.
To do so, assign the second caption to the 'caption2' option in the same manner as the first caption.
</p><p>
If the 'titleAsCaption' option is set to true (which it is by default) and a caption is not defined,
the anchor's title attribute will be used as the caption.
Be aware that browsers display an anchor's title as a tooltip when the user mouses over the anchor.
If you don't want the tooltip to occur, set your caption using the caption option rather than placing it in the title attribute.
</p><p>
Here's two examples:
</p>
<ul>
<li><span class="code notranslate">&lt;a href="image1.jpg" <b>data-fb-options="caption:`This is the first caption` caption2:`And this is the second caption`"</b>&gt;...&lt;/a&gt;</span></li>
<li><span class="code notranslate">&lt;a href="image1.jpg" <b>title="This is both a tooltip and a caption"</b>&gt;...&lt;/a&gt;</span></li>
</ul>
<p>
Floatbox captions can be built from, or contain, HTML elements.
There's two ways to get HTML into your captions.
The first is to put your caption's HTML inside a hidden div on the page and reference that div by id in the caption option.
Like this:
<span class="blockcode notranslate">
&lt;a href="image1.jpg" <b>data-fb-options="caption:#myCaptionDiv"</b>&gt;...&lt;/a&gt;<br />
...<br />
&lt;div id=&quot;myCaptionDiv&quot; style=&quot;display:none;&quot;&gt;<br />
&nbsp;&nbsp;&lt;span style=&quot;color:#123456;&quot;&gt;Here's an HTML caption with &lt;a href=&quot;http://example.com&quot;&gt;a link&lt;/a&gt;&lt;/span&gt;<br />
&lt;/div&gt;<br />
</span>
</p><p>
The second way is to assign the HTML caption directly in data-fb-options.
When assigned directly to the caption option all HTML entity characters (&amp; &quot; &lt; &gt;) will need to be encoded (&amp;amp; &amp;quot; &amp;lt; &amp;gt;) so that browsers can correctly parse the page.
This can get messy and can be harder to get right than the hidden div approach.
For example, the same caption assigned in the hidden div above looks like this when encoded and placed directly in the options:
<span class="blockcode notranslate">
&lt;a href="image1.jpg" <b>data-fb-options="caption:`&amp;lt;span style=&amp;quot;color:#123456;&amp;quot;&amp;gt;Here's an HTML caption with &amp;lt;a href=&amp;quot;http://example.com&amp;quot;&amp;gt;a link&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt;<br />`"</b>&gt;...&lt;/a&gt;
</span>
(I told you it could get messy.)
</p><p>
If you set your caption to the string "href", the displayed caption will be the value of the anchor's href attribute.
This might be useful when displaying iframed content or if you want to display the path/filename of the current image.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="header" class="separator"></div>
<h4>Header and Footer</h4>
<p>
The header and footer areas are transparent divs immediately above and below the floatbox frame area.
These can be used to display content attached to, but outside of the box, such as alternate captions or any html.
One possible use is for branding of the floatbox display, or attaching a company logo.
See a footer in action under "Appearance Modifications" on the Images tab of the <a href="http://randomous.com/floatbox/demo">demo page</a>.
</p><p>
Header and footer can be assigned in exactly the same way as captions, described above - as direct text, encoded html, or a reference to a hidden div.
The names of the options to set are 'header' and 'footer'.
Pulling header and footer content from a hidden div is probably the most common and trouble-free approach.  Here's an example:
<span class="blockcode notranslate">
&lt;a href="somePage.html" <b>data-fb-options="header:#myHeaderDiv"</b>&gt;...&lt;/a&gt;<br />
</span>
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="info" class="separator"></div>
<h4>Info box for secondary content</h4>
<p>
There are occasions when it is helpful to display additional information about your floatbox content.
For photogrpahs, this might be descriptive text, EXIF information or a popup location map.
Forms or other html content may have associated help or other information that can be effectively presented in a second floatbox.
Floatbox's info box capability addresses this usage.
When enabled, a link will appear in the lower left of the floatbox frame which activates the information box.
</p><p>
There are four options you can set in your anchor's data-fb-options attribute to enable and configure the info box.<br />
1) Assign the url that points to the information source using the option "info". E.g.,
<span class="code notranslate">info:myInfoPage.html</span> or <span class="code notranslate">info:#myInfoDiv</span><br />
2) Set floatbox options for the secondary info box using the option "infoOptions". E.g.,
<span class="code notranslate">infoOptions:`colorTheme:white width:400 height:300`</span>
(The backquotes are required to enable correct parsing.)<br />
3) By default the link in the floatbox frame will display the text "Info..." or its localized language equivalent.
You can override this with the "infoText" option. E.g.,
<span class="code notranslate">infoText:`EXIF data...`</span><br />
4) Use infoLinkPos to position the info link within floatbox border area. E.g.,
<span class="code notranslate">infoLinkPos:bl</span>
</p><p>
An anchor with an associated info box could look like this:<br />
<span class="code notranslate">
&lt;a href="myPhoto.jpg" class="floatbox" data-fb-options="info:#myInfoDiv infoOptions:`colorTheme:white width:400 height:300`"&gt;click here&lt;/a&gt;
</span>
</p><p>
Yes, there's an example or two on the demo page (in the 'Bonus' section).
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="print" class="separator"></div>
<h4>Print contents</h4>
<p>
If you set "showPrint:true" in a floatboxed anchor's data-fb-options attribute, a "Print..." link will be shown in the floatbox border area.
When clicked, this link will invoke a second browser instance that will display just the contents of the floatbox window and will show the print dialog for this new browser instance.
The contents that will be printed will be just that from the floatbox display, not the surrounding eye candy and not the host page content.
Use the printLinkPos option to control where in the floatbox border the "Print..." link will appear.
Use the 'printText' option to change the displayed "Print..." link to any other desired text.
</p><p>
In some circumstances you may find that you want to add css styling to the print window contents.  You can do this with the printCSS option.
If printCSS is a URL path to a css file, that css file will be attached to the print window.
Or, you can just put css assignments directly into this option, surrounded by backquotes.
For example: <span class="code notranslate">data-fb-options="showPrint:true printCSS:/css/print.css"</span>
or <span class="code notranslate">data-fb-options="showPrint:true printCSS:`p {font-size: 11px;} etc...`"</span>
You often don't need to add any css stuff for printing, but it's there if you need it.
</p><p>
The print link will not appear for Mobile Safari devices (iphones etc.) because handheld devices don't have printers.<br />
Also, printing is not available for iframe content that comes from a different domain than the base page (cross-site script blocking).
If you are displaying a cross-domain iframe in floatbox, the "Print..." option will not be displayed.
</p><p>
As usual, see the demo page ('Bonus' section) for an example.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="newwindow" class="separator"></div>
<h4>Open in a new window</h4>
<p>
You may have occasion to offer your site visitors a way to open the current floatbox content into its own new window.
Do this by setting 'showNewWindow' to true in an anchor's option string (rev or data-fb-options attribute).
This will place a link in the floatbox frame that can be clicked to open the new window.
</p><p>
The string displayed in the new window link is localized in the language files and will be shown in the site visitor's native browser language.
If the option 'showNewWindowIcon' is set to true (its default setting), a small new-window icon will be shown alongside the text link.
The option 'closeOnNewWindow' (false by default) will cause the current floatbox to end when the new-window link is clicked.
</p>

<div id="indexlinks" class="separator"></div>
<h4>Index links in a gallery</h4>
<p>
Galleries of multiple images (or other content) can have a series of simple numbered links shown in the floatbox border area.
If there are thumbnails associated with linked images, these thumbnails will be displayed as small popups when the numbered link is hovered with the mouse.
</p><p>
Primary control over the display of index links is done with the numIndexLinks option.  If this is zero, index links will not be shown.
If it is -1, there is no limit on the number of index links shown - there will be a link for each image in the gallery group.
Any positive integer and the number of links shown will be limited to this amount (in case you don't want a huge list of numbered links for your gallery of 479 pictures).
</p><p>
Three other options affect index links.
Setting showIndexThumbs to false turns off the thumbnail popups within the index links.
You can use maxIndexThumbSize to scale down large thumbnail popups in the index links so that their largest side does not exceed the given given size.
And you can control the location of the index links with the indexLinksPos option.
(See the "Layout" section of these instructions for details.)
</p><p>
You can see index links in action on the "Include Index Links" sample on the demo page.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="navigation" class="separator"></div>
<h4>Navigation and controls</h4>
<p>
Floatbox includes controls for moving to previous and next items in a group, resizing, playing and pausing a slideshow, and exiting.
These controls are graphical and loaded from the graphics folder.
If the configuration setting "controlsType" is set to the default "auto",
browsers that are configured with a localized language other than English will see graphics-only controls.
Localized English browsers will see control graphics that include English words.
</p><p>
There are two sets of previous/next controls for grouped items.
"Overlay" navigation displays a small graphics on top of the displayed image when the mouse is over the left or right side of the image.
"Button" navigation displays a clickable <span class="code notranslate">&lt;&lt; prev || next &gt;&gt;</span> (or the international equivalent) in the box frame outside of the content.
You can use either or both of these by setting the navType option.
My favourite setting is to set navType to "both" and set showNavOverlay to "never".
This allows navigation to occur by clicking on the image (or on the button nav control) but does not display the popup graphic over top of the image.
</p><p>
When the floatbox content has been shrunk from its native size to fit the screen, or when it is displayed larger than the current screen size,
a resize control will be displayed which can be used to toggle the item's size.
The "resizeTool" option controls whether the resize control will be a custom maginfying-glass cursor or a small graphic in the top left corner.
If the custom cursor is used and overlay navigation is enabled, click-resizing is active only in the space between the two upper navigation areas.
(Opera always gets the graphic in the top left corner because it can't do custom cursors.)
</p><p>
When enableKeyboardNav is set to true, the following keys can be used in place of mouse-clicking the controls:
</p>
<ul>
<li>Close: <span class="code notranslate">Esc</span></li>
<li>Previous item in a group: <span class="code notranslate">left arrow</span></li>
<li>Next item in a group: <span class="code notranslate">right arrow</span></li>
<li>Toggle play and pause: <span class="code notranslate">spacebar</span></li>
<li>Resize item: <span class="code notranslate">Tab</span></li>
</ul>
<p>
If the Ctrl key is used together with the left or right arrow, floatbox will jump 5 items ahead or back in the sequence.
This is to facilitate quick navigation when using floatbox as a poor-man's PowerPoint.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="layout" class="separator"></div>
<h4>Layout</h4>
<p>
There are many things that can appear inside the floatbox frame area:
the two captions, an info link, print link, new-window link, item number for gallery sets, index links and the close button and navigation controls.
You can control the positioning of these items with the *pos options:
captionPos, caption2Pos, infoLinkPos, printLinkPos, newWindowLinkPos, itemNumberPos, indexLinksPos and controlsPos.
</p><p>
The available positions are 'tl', 'tc', 'tr', 'bl', 'bc', and 'br' corresponding to top-left, top-center, bottom-left, etc.
You cannot fill all 6 positions. You can use only two positions at the top and two at the bottom.
So for example, if you have something assigned to the bottom-left, you can place something else either at bottom-center or bottom-right, but not both.
If you make a positioning request that cannot be filled, the frame items will be moved to other locations in the frame.
</p><p>
The close button and navigation controls cannot be assigned to a center position (tc or bc),
but you can set the centerNav option to true to move the navigation controls to the center of the frame while leaving the close button off to the side.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="appearance" class="separator"></div>
<h4>Appearance and Colors</h4>
<p>
There's lots of control over Floatbox's appearance.
Many of Floatbox's options are for configuring appearance.
You can set the colors, round corners, border sizes, display of controls, shadow effect, transparencies and various animation effects through the configuration options.
See the <a href="options.html">options reference</a> for details on the use of these (and other) options.
It's a good idea to play with the "Set Options" form on the demo page to try out the different option settings that are available.
</p><p>
Floatbox has 6 pre-configured color themes: white, black, blue, red, yellow and custom.
When no colorTheme option is specified, Floatbox defaults to black for images, white for html content, and blue for multi-media.
The 'colorTheme' option can be set globally, per page, or per item to override these per-type defaults.
The backgroundColor option sets the background color inside the floatbox content area and is useful if the displayed content has transparent areas.
</p><p>
Colors of various Floatbox components can be specified directly using color options.
In addition to colorTheme and backgroundColor, the following are available:
mainColor, overlayColor, innerBorderColor, outerBorderColor, textColor and strongTextColor.
These should be fairly self-explanatory from their names,
but it is worth noting that 'textColor' applies to the 'item x of y' display, index links, and the 'open in a new window' link,
while strongTextColor applies to captions, info and print links, and the new window link when it's hovered.
The strongControls option sets the control's (close, prev/next, etc.) background images to their 'on' or hovered state which may help match them against custom mainColor or textColor settings.
</p><p>
Setting customized colors through options is best done by assigning the options to a class defined fbClassOptions or the global classOptions and then placing that class name on the floatboxed links.
See the Instruction sections on setting page-specific and site-wide options for details.
</p><p>
The 'custom' color setting is for creating and using your own customized color scheme via css.
Look at the top of floatbox.css for settings pertaining to the custom scheme.
The settings are well documented with comments in the css and allow you to easily modify the default colors.
The control widget backgrounds such as for the close or prev/next buttons can be replaced with custom background images.
If you do this, be sure to change the various control widths and heights in the css as described in the comments.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="background" class="separator"></div>
<h4>Custom background image</h4>
<p>
You can use a graphic as an overlay background image by providing a background-image style for the overlay element.
In a css file, it would look something like this:<br />
<span class="code notranslate">
#fbOverlay {<br />
&nbsp;&nbsp;&nbsp;&nbsp;background-image: url(bkgrnd.gif);<br />
}<br />
</span>
The background-image setting can be placed in an external css file together with the appropriate include in the head section of your page,
or it can be placed directly inside a <span class="code notranslate">&lt;style type="text/css"&gt;&lt;/style&gt;</span> section in the page head.
Of course, background-image can also be added to floatbox.css if you want it universally applied, but this will prove to be a pain when you upgrade to a new version.
</p><p>
When a custom background image is used, you may want to also set overlayOpacity to 100, or maybe play with lower values to fade the background.
For an example of a custom background and the use of autoStart and loadPageOnClose, check out the APOD slideshow on the <a href="http://randomous.com/floatbox/demo">demo page</a>.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="language" class="separator"></div>
<h4>Language localization</h4>
<p>
Floatbox includes language localization files for 35 languages.
The strings in these files are used as tool tip hints for the floatbox controls,
the "image x of y" display, the text displayed on "Info.." and "Print..." links,
and the strings shown when a required multimedia plugin is not present.
The correct language file will be selected for use based on the localization settings or your site visitor's browsers.
You can set floatbox to always use one particular language file by setting the "language" option.
But it is recommended that you not do this.  By leaving language as "auto", your visitors will get the correct language for themselves.
</p><p>
There are two sets of graphics used for the floatbox controls. One set has English text on the controls ("Close", "Next", etc.),
while the other set is purely graphical.
In the default setting, the English controls will be served to people with English-localized browsers
and all other users will get the non-graphical, international controls.
You can use international controls for everybody, including English speaking folk, by setting controlsType to "international".
</p><p>
The Floatbox API has a library function fb.translate which provides an interface to the Google translation service.
This function can be used to translate any floatbox content, or other page content, from and to a variety of languages.
See the API reference for details.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="auto" class="separator"></div>
<h4>Auto-start and exit tasks</h4>
<p>
You can have floatbox content appear directly on page load by using the autoStart option.
Put "autoStart:true" into the data-fb-options attribute of the floatbox-enabled item that you want to run automatically.
As soon as the page loads, floatbox will start with this item displayed.
You can use "autoStart:once" to have that tagged item display only on the first page load of the session.
Doing this sets a session cookie when the item is first shown and that item will not be auto-shown again as long as that session cookie is present.
</p><p>
You can also invoke an auto-start through a query string on the url used to invoke the page.
For example, a url of <span class="code notranslate">"http://example.com/mypage.html?autoStart=myimage.jpg"</span>
will auto-start myimage.jpg provided there is an anchor on the page that is setup for floatbox and that has that image as its href value.
Note that the query string value only has to match the right-hand side of the anchor's href.
The given example would match an href of "/images/this_is_myimage.jpg".
</p><p>
Floatbox can automatically load or reload a web page in the browser when it exits.
The "loadPageOnClose" option is used to make this happen.
Set loadPageOnClose to the string 'self' to refresh the host page on exit.
This can be useful if your floatboxed content has modified some back-end content and the host page needs to be refreshed to reflect the changes.
If you set loadPageOnClose to the string 'back', the previous page in the browser's history list will be loaded.
This is used in the APOD slideshow on the demo page.
If loadPageOnClose is neither 'self' nor 'back', it is assumed to be a valid url and the browser will be instructed to load that page.
If you set loadPageOnClose to a url inside an option string, you will likely need to surround the url with backquotes (`) so as not to break parsing of the option string.
</p><p>
Firefox has buggy history/back button behaviour when an iframe is on a page, navigation occurs in that iframe, and the iframe is subsequently removed from the page.
This bug can prevent loadPageOnClose='back' from working when closing iframe content in Firefox.
For this reason, it is recommended that you don't use the 'back' instruction when showing iframe (a normal html page) content. Use the URL of the current page instead.
</p><p>
You can set loadPageOnClose in the usual option setting way (fbPageOptions or the data-fb-options attribute), but you can also set it dynamically with javascript.
For example, your script could say <span class="code notranslate">fb.loadPageOnClose = 'somePage.html';</span>
(or <span class="code notranslate">parent.fb.loadPageOnClose</span> if you're running from a floatboxed iframe page that does not have the floatbox files included on it).
</p><p>
When closing floatbox by calling the API end function, the equivalent to loadPageOnClose can be passed directly as an argument to that function like this:
<span class="code notranslate">fb.end( 'somePage.html' )</span>.
</p><p>
Be sure to see the API reference for information about the Floatbox callbacks that are available to run custom code on such events as floatbox or item start and end.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="imagemap" class="separator"></div>
<h4>Image map areas</h4>
<p>
Floatbox can work with <a href="http://www.w3schools.com/js/js_image_maps.asp">image map areas</a> the same way it does for standard &lt;a&gt; elements.
To do this, set up the class and options attributes as described above, but for image maps these attributes go on the map's &lt;area&gt; elements.
There's an example in the 'Bonus' section of the <a href="http://randomous.com/floatbox/demo">demo page</a>.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="iniframes" class="separator"></div>
<h4>Running in iFramed pages</h4>
<p>
You can run floatbox from iframed pages if you like, and those iframes can be nested as deep as you want.
The floatbox.js and floatbox.css files need to be included in the root (top) page and on every page in a nested chain down to and including the last child page that has floatbox content on it.
For example, if you have a page with iframes nested two deep and floatbox content only in the deepest iframe, you need the floatbox files included in the deep iframe, the parent of that iframe, and the root document.
Options.js should be included on the base (top) page but does not need to be in any of the child iframes.
(See the iFrames section of the <a href="http://randomous.com/floatbox/demo">demo page</a> for an example of a floatbox-enabled page with iframes nested two deep.)
</p><p>
Note that browsers restrict <a href="http://en.wikipedia.org/wiki/Cross-site_scripting">cross-site scripting</a>.
Floatbox (and any other lightbox-type script) will not be able to function from within an iframe if the top page and iframed child page are not coming from the same domain and using the same protocol.
(You can use the 'framed' setting in these circumstances. See below.)
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="framed" class="separator"></div>
<h4>Constraining floatbox to a particular iFrame (or frameset child)</h4>
<p>
Floatbox normally occupies the entire browser window when displaying content by attaching itself to the top document.
You can, if you like, have floatbox appear only inside a particular iframe and constrain itself to the dimensions of that iframe (or to a frameset child document).
There are two ways to do this.
</p><p>
The first is to place "framed" in the querystring on the floatbox.js include source path.
The include lines could then look like this:<br />
<span class="code notranslate">&lt;link type="text/css" rel="stylesheet" href="/floatbox/floatbox.css?v=1.23" /&gt;</span><br />
<span class="code notranslate">&lt;script type="text/javascript" src="/floatbox/floatbox.js?v=1.23&amp;framed"&gt;&lt;/script&gt;</span>
</p><p>
The second way to get framed behaviour is to set the 'framed' option in an fbPageOptions definition.
Something like:<br />
<span class="blockcode notranslate">
&lt;script type="text/javascript"&gt;<br />
fbPageOptions =  {<br />
&nbsp;&nbsp;framed: true<br />
};<br />
&lt;/script&gt;<br />
</span>
</p><p>
For frameset pages, you must use the 'framed' option to attach floatbox to one or more of the child frame pages.
A frameset master page cannot render content itself and consequently cannot have floatbox attached to it.
If you are licensing floatbox for use on a frameset site, the registered domain should be the domain that the frame content is loading from.
This frame holds the window object that Floatbox will attach to, and it is the domain of this window that needs to match the license key.
</p><p>
With the "framed" parameter in place, Floatbox attaches itself to the current window's document, rather than the top document.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="altcontent" class="separator"></div>
<h4>Accessible content (Section 508)</h4>
<p>
Floatbox provides two options, 'altContent' and 'attachTo', that can be used to provide accessible content for people with disabilities.
These options designate alternate content for images and iframes and provide correct sequencing or placement of content opened in a floatbox.
These capabilities allow floatboxed content to be correctly handled by screen readers,
making the Floatbox content compatible with sites intended to meet <a href="http://en.wikipedia.org/wiki/Section_508_Amendment_to_the_Rehabilitation_Act_of_1973">US Section 508</a> requirements.
'altContent' is described here and 'attachTo' in the section that follows.
</p><p>
Use 'altContent' to assign a text string of alternate content to specific floatbox items.
When set on an image link or start call, the altContent text will be assigned to the 'alt' tag of the floatbox image element.
This will be the text read by a screen reader in place of showing the image.
When set for iframe content, the text will be assigned to the iframe's 'title' attribute and will also provide the text for a link to the iframe page in the iframe's alternate content.
</p><p>
For example - from a link on the page:<br />
<span class="code notranslate">
&lt;a href="tulips.jpg" data-fb-options="altContent:`dozens of tulips in a field`"&gt;go&lt;/a&gt;
</span><br />
results in a displayed img element of:<br />
<span class="code notranslate">
&lt;img src="tulips.jpg" alt="dozens of tulips in a field" /&gt;
</span>
</p><p>
Or, an iframe from an fb.start() call:<br />
<span class="code notranslate">
fb.start( 'lesson1.html', 'altContent:`tutorial on building accessible sites`' );
</span><br />
results in a displayed iframe element of:<br />
<span class="code notranslate">
&lt;iframe src="lesson1.html" title="tutorial on building accessible sites"&gt;&lt;a href="lesson1.html"&gt;tutorial on building accessible sites&lt;/a&gt;&lt;/iframe&gt;
</span><br />
Notice how a link to the lesson1 page is provided for agents such as screen readers that can't display the iframe.
</p><p>
Use of 'attachTo' for correct content sequencing is described below.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="attachto" class="separator"></div>
<h4>Attach to a specific document element</h4>
<p>
Default behaviour for Floatbox is to attach itself to a page's body element as the last child of the body.
The 'attachTo' option can be used to direct floatbox to append itself to a particular element other than the body.
There are two reasons why you might want to do this.
First, page content needs to appear in the correct sequence to be compatible with screen readers and compliant with US Section 508 accessibility requirements.
Second, ASP.NET pages can contain only one form and so any form content presented in a floatbox needs to be attached inside this one form to function correctly.
</p><p>
Set attachTo to 'click' to have the floatbox attach in the document immediately following the clicked item that started the box.
This is a good choice to meet accessibility requirements of correct content sequencing.
The attachTo option can also be set to the id of an existing element (usually a div or a form) to have the floatbox appended to that element.
This is how you would attach a floatbox to an ASP.NET form.
</p><p>
Using attachTo does not make the content appear inline with the host page content.
It still appears as normal in the floatbox, but is logically placed at the requested location in the page's document tree.
Note that when attaching floatboxed html content (other than an iframe) to a document element, the content may inherit some css settings from the parent element that would not be inherited had the floatbox attached directly to the body.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="dynamic" class="separator"></div>
<h4>Dynamically loading floatbox content via AJAX or UpdatePanel</h4>
<p>
When floatbox first loads on a page, it runs its activateElements function to inventory all the floatbox-enabled anchors and area maps on the page, and to add the required onclick action to those anchors.
It also activates any cycler sets, enhanced tooltips and popup thumbnails defined in the content.
Floatbox's built in fb.ajax() function will automatically run activateElements against any new content brought in using that function.
If you dynamically update a portion of your page using any other method, any floatbox-enabled anchors in that content won't be in floatbox's inventory and won't have the required click or mouseover actions attached to them.
To give those new anchors floatbox behaviour you need to re-run fb.activateElements().
</p><p>
Your existing AJAX content insertion might look something like this:<br />
<span class="blockcode notranslate">
if (xhReq.readyState == 4) {<br />
&nbsp;&nbsp;document.getElementById('myXhrDiv').innerHTML = xhReq.responseText;<br />
}
</span>
</p><p>
Light up the floatbox anchors in that dynamic content by adding the following line after that insertion:<br />
<span class="blockcode notranslate">
if (xhReq.readyState == 4) {<br />
&nbsp;&nbsp;document.getElementById('myXhrDiv').innerHTML = xhReq.responseText;<br />
&nbsp;&nbsp;fb.activateElements();<br />
}
</span>
This clears the existing inventory of anchors and then re-inventories the entire document, including the freshly added new content.
Now your new floatbox anchors will work.
</p><p>
A jQuery ajax fetch which launches activateElements on completion could look like this:
<span class="blockcode notranslate">
$.get('someURL.php', function(data) {<br />
&nbsp;&nbsp;$('.myXhrDiv').html(data);<br />
&nbsp;&nbsp;fb.activateElements();<br />
});
</span>
</p><p>
But really, the simplest approach is to use floatbox's built-in ajax function and get activateElements executed for free.
<span class="blockcode notranslate">
fb.ajax({ source:'someURL.php', updateNode:'myXhrDiv' });
</span>
</p><p>
For an ASP.NET UpdatePanel, you can set a callback function to fire the floatbox activation after the panel has finished updating.
Put this javascript on the page:<br />
<span class="blockcode notranslate">
function pageLoad(sender, args) {<br />
&nbsp;&nbsp;if (args.get_isPartialLoad()) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;fb.activateElements();<br />
&nbsp;&nbsp;}<br />
}<br />
</span>
</p><p>
Or... as an alternative to getting the fb.activateElements function to fire at the right time,
you could setup your new anchors with their own onclick action instead of giving them a class of "floatbox".
For example, the following anchor will fire up in floatbox when clicked without needing to be activated:
<span class="blockcode notranslate">
&lt;a href="somePage.html" onclick="fb.start(this); return false;"&gt;do it&lt;/a&gt;
</span>
You can add options to the above sample anchor in the usual way by adding the desired data-fb-options or rev attribute settings.
</p><p>
(The legacy fb.tagAnchors function is still supported and still works.)
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="wordpress" class="separator"></div>
<h4>WordPress and other templated systems</h4>
<p>
The recommended and supported approach to using Floatbox on a templated site such as WordPress
is to directly edit the site's html as described in these instructions and shown on the demo page.
Doing so gives you access to all of Floatbox's capabilities and support.
Floatbox support does not extend to any third-party tools or plugins.
</p><p>
Please see <a href="http://randomous.com/wordpress/">this WordPress post</a>
for some getting-started pointers useful for adding Floatbox to the html of any template-based site.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="actionscript" class="separator"></div>
<h4>Launching floatbox from flash ActionScript</h4>
<p>
This topic has very little to do with Floatbox, and everything to do with authoring behaviours in flash objects.
But there's a demand for this information so perhaps the little bit here can be some help.
</p><p>
Flash ActionScript can navigate to a URL on a click event, and a URL can be defined as a javascript action.
This allows us to launch Floatbox using its javascript fb.start() API function as the target of an ActionScript navigation URL.
Let's walk through setting that up.
</p><p>
Create a button in a flash object and give it a name. Let's call ours "button1".
Now define a click action on that button.
In ActionScript 2, that click action can be set on the button's action panel with <span class="code notranslate">on(release) { ... }</span>.
However, I think it's cleaner to define all ActionScript on the generic action panel of the layer object.
</p><p>
First, we'll get the click action to simply show a javascript alert.
On the layer's action panel, define an action like the following (this is ActionScript 2):<br />
<span class="blockcode notranslate">
button1.onRelease = function() {<br />
&nbsp;&nbsp;&nbsp;&nbsp;getURL("javascript:alert(99)");<br />
};<br />
</span>
</p><p>
ActionScript 3 does not have a getURL function.  For AS3, use the more complex:<br />
<span class="blockcode notranslate">
function myFunc(event:MouseEvent):void {<br />
&nbsp;&nbsp;&nbsp;&nbsp;var request:URLRequest = new URLRequest("javascript:alert(99)");<br />
&nbsp;&nbsp;&nbsp;&nbsp;navigateToURL(request, "_self");<br />
}<br />
button1.addEventListener(MouseEvent.CLICK, myFunc);<br />
</span>
</p><p>
The idea of using the simple alert is that we can test that the ActionScript is working first before involving Floatbox.
Assuming that it's working fine, let's replace the alert with the fb.start() call to open a floatbox.
Checking the <a href="api.html">API reference</a> we see that the fb.start function takes two string parameters.
The first is the path to the content to be shown and the second is any Floatbox options that we want to set for that content.
</p><p>
The AS2 code with the fb.start command will look something like this:
<span class="blockcode notranslate">
button1.onRelease = function() {<br />
&nbsp;&nbsp;&nbsp;&nbsp;getURL("javascript:fb.start('gumby.jpg', 'roundCorners:none')");<br />
};<br />
</span>
And the equivalent AS3 code would be:
<span class="blockcode notranslate">
function myFunc(event:MouseEvent):void {<br />
&nbsp;&nbsp;&nbsp;&nbsp;var request:URLRequest = new URLRequest("javascript:fb.start('gumby.jpg', 'roundCorners:none')");<br />
&nbsp;&nbsp;&nbsp;&nbsp;navigateToURL(request, "_self");<br />
}<br />
button1.addEventListener(MouseEvent.CLICK, myFunc);<br />
</span>
I've used an arbitrary option here just to show where the options go.
The options parameter is optional (no pun intended), and the simple <span class="code notranslate">fb.start('gumby.jpg')</span> is perfectly legal.
</p><p>
That's it.
Providing you've got the Floatbox files properly included on the page
and the content reference in the fb.start command points to something that exists,
you should have Floatbox opening from a click on a flash button.
If it's not working, confirm that the simple alert(99) works from the click action.
If it does, then try pasting and running the javascript action directly into a browser's address bar and running it from there.
If <span class="code notranslate">javascript:fb.start('pathToYourContent')</span> doesn't work from the address bar, you need to look for the reason why.
</p><p>
There's a couple of samples in the 'Code' section of the floatbox <a href="http://randomous.com/floatbox/demo">demo page</a>.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="gzip" class="separator"></div>
<h4>Serving gzip compressed files on Apache and IIS</h4>
<p>
Warning: This section discusses modifying your .htaccess file and using mod_rewrite on your Apache server.
This is a bit of a black art.  What works on one server configuration may not work another.
No support or assistance is provided for modifying your .htaccess file or for serving the gzip files.
</p><p>
The modules folder contains gzipped versions of the .js and .css files in it.
The gzip files are a fraction of the size of the original files, but serve exactly the same content to the browser.
You can direct your Apache server to serve these gzip files through your .htaccess file.
The .htaccess file can be located in the floatbox or modules folder itself if you only want to serve floatbox gzipped files.
If you want to enable gzipped files across your site, the .htaccess directives can go in your site's root folder.
</p><p>
Here's the suggested (but unsupported) htaccess directives to enable gzip file serving.<br />
<span class="blockcode notranslate">
&lt;IfModule mod_rewrite.c&gt;<br />
&lt;IfModule mod_headers.c&gt;<br />
<br />
Options -MultiViews<br />
RewriteEngine on<br />
# if folder aliases are in use, set the correct RewriteBase for this folder<br />
# RewriteBase /<br />
<br />
&lt;FilesMatch "\.js\.gz$"&gt;<br />
	ForceType text/javascript<br />
	Header set Content-Encoding: gzip<br />
&lt;/FilesMatch&gt;<br />
<br />
&lt;FilesMatch "\.css\.gz$"&gt;<br />
	ForceType text/css<br />
	Header set Content-Encoding: gzip<br />
&lt;/FilesMatch&gt;<br />
<br />
RewriteCond %{REQUEST_FILENAME}.gz -f<br />
RewriteCond %{HTTP:Accept-encoding} gzip<br />
RewriteRule ^(.+)$ $1.gz [L]<br />
<br />
&lt;/IfModule&gt;<br />
&lt;/IfModule&gt;<br />
</span>
</p><p>
Options.js is not provided in gzip format because it is intended to be edited with your implementation preferences.
If you want to serve a gzipped version of this file, first edit (or use the configurator) to set your option preferences and then gzip the modified file.
(<a href="http://www.gnu.org/software/gzip/">GNU.org</a> - <a href="http://gnuwin32.sourceforge.net/packages/gzip.htm">Gzip for Windows</a>)
</p><p>
IIS does not use the gzip files that are provided in the Floatbox package.
Instead, compression is enabled and configured within IIS and IIS will generate its own compressed version of the served files.
A search on "gzip iis" will locate information on how to enable and configure compression in IIS.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div id="library" class="separator"></div>
<h4>Using the library functions</h4>
<p>
Floatbox exposes an API to many of its internal functions that allows it be used as an effective javascript library in contexts beyond the base Floatbox functionality.
In many cases, you can avoid loading other libraries such as jquery or mootools and instead use the Floatbox calls that are already loaded on your page.
The Floatbox library includes a simple to use, robust and flexible AJAX utility, language translation,
event handling, an image preloader, easy flash object creation, some helpful DOM manipulation routines, and more.
For a complete list of available Floatbox functions, please see the <a href="api">API reference</a>.
</p><p>
<a href="#index">Back to Index</a>
</p>

<div class="separator"></div>
</div>
</body>
</html>
